<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HPLOK - 高端备忘录引擎</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <aside class="sidebar glass-effect">
            <div class="logo">
                <h1>HPLOK</h1>
                <p>高端备忘录引擎</p>
            </div>
            <div class="sidebar-nav">
                <button id="create-project-btn" class="primary-btn"><i class="fas fa-plus"></i> 创建项目</button>
                <div class="nav-section">
                    <h3>项目</h3>
                    <ul id="projects-list">
  <li class="project-item" data-template>
    <span class="project-color-indicator" style="background-color: &quot;{{color}}&quot;"></span>
    <span>{{name}}</span>
    <button class="delete-project-btn" data-project-id="{{id}}"><i class="fas fa-times"></i></button>
  </li>
</ul>
                </div>
                <div class="nav-section">
                    <h3>标签</h3>
                    <ul id="tags-list"></ul>
                </div>
            </div>
            <div class="sidebar-footer">
                <button id="settings-btn"><i class="fas fa-cog"></i> 设置</button>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 欢迎界面 -->
            <div id="welcome-screen" class="welcome-screen">
                <div class="welcome-content">
                    <h2>欢迎使用 HPLOK</h2>
                    <p>高端备忘录引擎，帮助你组织思路，提高效率</p>
                    <button id="get-started-btn" class="primary-btn"><i class="fas fa-rocket"></i> 开始使用</button>
                </div>
            </div>

            <!-- 项目界面 (默认隐藏) -->
            <div id="project-screen" class="project-screen hidden glass-effect">
                <div class="project-header">
                    <h2 id="current-project-title"></h2>
                    <div class="project-actions">
                        <button id="create-note-btn" class="primary-btn"><i class="fas fa-sticky-note"></i> 新建备忘录</button>
                <button id="delete-note-btn" class="danger-btn"><i class="fas fa-trash"></i></button>
                        <button id="project-settings-btn"><i class="fas fa-ellipsis-v"></i></button>
                    </div>
                </div>
                <div class="notes-container">
                    <div class="notes-list glass-effect" id="notes-list"></div>
                    <div class="note-editor" id="note-editor">
                        <div class="editor-toolbar glass-effect">
                            <button class="editor-btn" data-command="bold"><i class="fas fa-bold"></i></button>
                            <button class="editor-btn" data-command="italic"><i class="fas fa-italic"></i></button>
                            <button class="editor-btn" data-command="underline"><i class="fas fa-underline"></i></button>
                            <button class="editor-btn" data-command="strikeThrough"><i class="fas fa-strikethrough"></i></button>
                            <div class="separator"></div>
                            <button class="editor-btn" data-command="justifyLeft"><i class="fas fa-align-left"></i></button>
                            <button class="editor-btn" data-command="justifyCenter"><i class="fas fa-align-center"></i></button>
                            <button class="editor-btn" data-command="justifyRight"><i class="fas fa-align-right"></i></button>
                            <div class="separator"></div>
                            <button class="editor-btn" data-command="insertUnorderedList"><i class="fas fa-list-ul"></i></button>
                            <button class="editor-btn" data-command="insertOrderedList"><i class="fas fa-list-ol"></i></button>
                            <div class="separator"></div>
                            <button class="editor-btn" data-command="createLink"><i class="fas fa-link"></i></button>
                            <button class="editor-btn" data-command="insertImage"><i class="fas fa-image"></i></button>
                        </div>
                        <input type="text" id="note-title-input" class="glass-effect" placeholder="备忘录标题...">
                        <div id="note-content" class="glass-effect" contenteditable="true" placeholder="在这里输入你的备忘录内容..."></div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 创建项目模态框 -->
    <div id="create-project-modal" class="modal hidden">
        <div class="modal-content glass-effect">
            <div class="modal-header">
                <h3>创建新项目</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <input type="text" id="new-project-name" placeholder="项目名称">
                <input type="color" id="new-project-color" value="#3498db">
                <textarea id="new-project-description" placeholder="项目描述 (可选)"></textarea>
            <div class="tag-input-container glass-effect">
                <input type="text" id="new-project-tags" placeholder="输入标签，用逗号分隔">
                <div id="tag-suggestions"></div>
            </div>
            </div>
            <div class="modal-footer">
                <button class="cancel-btn">取消</button>
                <button id="confirm-create-project" class="primary-btn">创建</button>
            </div>
        </div>
    </div>

    <!-- 设置模态框 -->
    <div id="settings-modal" class="modal hidden">
        <div class="modal-content glass-effect">
            <div class="modal-header">
                <h3>设置</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="setting-item">
                    <label for="border-opacity">边框透明度</label>
                    <input type="range" id="border-opacity" min="0.01" max="0.2" step="0.01" value="0.05">
                    <span id="border-opacity-value">0.05</span>
                </div>
                <div class="setting-item">
                    <label for="blur-amount">模糊程度 (px)</label>
                    <input type="range" id="blur-amount" min="0.1" max="5" step="0.1" value="0.6">
                    <span id="blur-amount-value">0.6</span>
                </div>
            </div>
            <div class="modal-footer">
                <button class="cancel-btn">取消</button>
                <button id="save-settings" class="primary-btn">保存设置</button>
            </div>
        </div>
    </div>

    <script src="js/app.js"></script>
</body>
</html>

<div class="popup-overlay" id="dataWarningPopup">
    <div class="popup-content">
        <h3>数据存储提醒</h3>
        <p>由于本app为个人开发，经费不足，因此用户的所有数据保存在本地的浏览器当中，如果用户想要清理浏览器数据时，请用户备份好数据，本app不会对用户的数据负责，请用户自行承担数据的保管与内容管理，感谢配合，用户使用了本APP视为同意弹窗提醒</p>
        <button id="agreeBtn">我已了解并同意</button>
    </div>
</div>

<style>
    .popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    
    .popup-content {
        background-color: white;
        padding: 24px;
        border-radius: 12px;
        max-width: 90%;
        width: 300px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
    
    .popup-content h3 {
        margin-bottom: 16px;
        color: #e74c3c;
        font-size: 18px;
    }
    
    .popup-content p {
        margin-bottom: 24px;
        line-height: 1.6;
        font-size: 14px;
    }
    
    #agreeBtn {
        width: 100%;
        padding: 12px;
        background-color: #3498db;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.2s;
    }
    
    #agreeBtn:hover {
        background-color: #2980b9;
    }
</style>

<script>
    // 数据存储警告弹窗逻辑
    document.addEventListener('DOMContentLoaded', function() {
        const popup = document.getElementById('dataWarningPopup');
        const agreeBtn = document.getElementById('agreeBtn');
        
        // 检查用户是否已同意
        if (localStorage.getItem('agreedToDataWarning')) {
            popup.style.display = 'none';
        }
        
        agreeBtn.addEventListener('click', function() {
            localStorage.setItem('agreedToDataWarning', 'true');
            popup.style.display = 'none';
        });
    });
</script>